<template>
  <div v-loading="loading" class="wrapper">
    <!-- <el-row class="header">
      <el-button type="primary" @click="handleWithdrawDialog">提现</el-button>
    </el-row> -->
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="id" label="提现编号" width="100" />
      <!-- <el-table-column prop="wit_no" label="提现编号" width="150"/> -->
      <el-table-column prop="cash_amount" label="提现金额" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag type="success">{{ Number(scope.row.status) === 0 ? '待审核': Number(scope.row.status) === 1 ? '已审核提现中' : Number(scope.row.status) === 2? '提现成功' : '提现失败' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="certificate_img" label="打款凭证" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.certificate_img" :preview="`${scope.$index}-rent1`" preview-text="" alt="" class="image">
        </template>
      </el-table-column>
      <el-table-column prop="account_name" label="开户名称" width="120" />
      <el-table-column prop="account_bank_name" label="开户行" width="150" />
      <el-table-column prop="bank_number" label="银行卡号" width="150" />
      <el-table-column prop="transfer_at" label="转账时间" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.transfer_at }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="create_at" label="创建时间" width="200" />
      <el-table-column label="操作" min-width="300" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleDetial(scope)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>listQuery.limit" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <router-view />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { withdrawList } from '@/api/withdraw'
import { parseTime } from '@/utils'
export default {
  name: '',
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      list: [],
      withdrawDialog: false,
      loading: false
    }
  },
  computed: {
    tableData() {
      return this.list.map((item) => {
        item.transfer_at = Number(item.transfer_at) > 0 ? parseTime(item.transfer_at) : ''
        item.create_at = parseTime(item.create_at)
        return item
      })
    }
  },
  created() {
    this.getWithdrawList()
  },
  methods: {
    async getWithdrawList() {
      this.loading = true
      const { page, limit } = this.listQuery
      const data = await withdrawList({ page, size: limit })
      this.loading = false
      const { lists, total } = data.data
      this.list = lists
      this.total = total
    },
    getList(prop) {
      this.listQuery.page = prop.page
      this.listQuery.limit = prop.limit
      this.getWithdrawList()
    },
    handleDetial(scope) {
      this.$router.push({
        path: '/finance/withdraw/withdrawDetail',
        query: {
          ...scope.row
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .header{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }
  .withdraw-container{
    display: flex;
    font-size: 14px;
    align-items: center;
    color: #050505;
    .withdraw-input{
      width: 50%;
    }
  }
  .image {
    width: 50px;
    height: 50px;
  }
}
</style>
